<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#main{
				color: red;
				font-size: 32px;
			}
			.box1,.box2{
				width: 150px;
				height: 150px;
				/*background: lightblue;*/
			}
			/*
			 第一种情况：
			 	使用类选择器给了默认样式
			 	但是使用了层级选择器，这个时候就会有优先级的问题,层级选择优先级更高
			 * */
			/*#main .box1{
				background: red;
			}
			
			.main_div .box1{
				background: red;
			}
			
			* 
			* */
			
			
			/**
			 
			 如果出现层级选择器，优先级比单个样式选择更高(即使是id选择器也是这样)

			 */
			
			#box1_id{
				background: red;
			}
			
			#main .box1{
				background: lightblue;
			}
			
			
			
			
		</style>
	</head>
	<body>
		<div id="main" class="main_div">
			id=main 的div
			<div class="box1" id="box1_id">
				box1
			</div>
			<a href="#">test</a>
			<div class="box2">
				box2
			</div>
			
		</div>
	</body>
</html>
